<template>
  <div>
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="账号">
        <el-input v-model="queryInfo.account" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="queryInfo.userName" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="用户身份">
        <el-select v-model="queryInfo.userType" placeholder="用户身份">
          <el-option label="普通用户" value="1"></el-option>
          <el-option label="管理员" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户状态">
        <el-select v-model="queryInfo.dataStatus" placeholder="用户状态">
          <el-option label="正常" value="true"></el-option>
          <el-option label="锁定" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAdd">添加用户</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="用户id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="account"
          label="用户账号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="用户名称">
      </el-table-column>
      <el-table-column
          prop="birthday"
          label="生日">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别">
        <template slot-scope="scope">
          {{scope.row.sex ===true?'男':'女'}}
        </template>
      </el-table-column>
      <el-table-column
          prop="phone"
          label="电话">
      </el-table-column>
      <el-table-column
          prop="userType"
          label="用户类型">
        <template slot-scope="scope">
            {{scope.row.userType ===1?'普通用户':'管理员'}}
        </template>
      </el-table-column>
      <el-table-column
          prop="dataStatus"
          label="用户状态">
        <template slot-scope="scope">
          {{scope.row.dataStatus ===false?'锁定':'正常'}}
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.id!==1">编辑</el-button>
          <el-button
              size="mini"
              @click="handleEnable(scope.$index, scope.row)" v-if="scope.row.id!==1">{{scope.row.dataStatus ===true?'停用':'启用'}}</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)" v-if="scope.row.id!==1">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="float: right;margin: 10px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          layout="sizes, prev, pager, next"
          :total="dataCount">
      </el-pagination>
    </div>
    <user-add-dialog v-bind:dialog-form-visible=this.addDialog v-bind:type="this.addType" v-bind:user="this.nowUser" @change="getTableData"></user-add-dialog>
    <user-update-dialog v-bind:dialog-form-visible=this.updateDialog v-bind:type="this.updateType" v-bind:user="this.nowUser" @change="getTableData"></user-update-dialog>
  </div>
</template>

<script>


import {doDeleteUser, doGetUser, doGetUserById, doUpdateUserStatus} from "@/api/user";
import {Message} from "element-ui";
import UserAddDialog from "@/components/dialog/userDialog.vue";
import UserUpdateDialog from "@/components/dialog/userDialog.vue";
export default {
  name: "index",
  components: {UserAddDialog,UserUpdateDialog},
  data() {
    return {
      page:{pageIndex:1,pageSize:10},
      dataCount:10,
      queryInfo: {
        account: '',
        userName: '',
        userType: '',
        dataStatus: ''
      },
      tableData: [{id:448864257,account:"test",userName:null,email:"1331@qq.com",userType:false,dataStatus:true}],
      addDialog:false,
      updateDialog:false,
      addType:'add',
      updateType:'update',
      nowUser:{id:'',account:"",userName:"",email:"",userType:1}
    }
  },
  methods: {
    getTableData(){
      this.addDialog=false;
      this.updateDialog=false;
      var obj = {
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize,
        queryInfo: this.queryInfo
      }
      doGetUser(obj).then(res=>{
        if (res.code===200){
          this.dataCount=res.data.total;
          this.tableData = res.data.records;
        }
      })
    },
    onSubmit() {
      this.getTableData();
    },
    handleSizeChange(val) {
      this.page.pageSize=val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.pageIndex=val;
      this.getTableData();
    },
    handleEdit(index, row){
      doGetUserById(row.id).then(res=>{
        if (res.code===200){
          this.nowUser=res.data
          this.updateDialog=false;
          this.addDialog=false;
          this.updateDialog=true;
        }
      })
    },
    handleEnable(index, row){
      this.$confirm(row.dataStatus?'此操作将停用该用户, 是否继续?':'此操作将启用该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        doUpdateUserStatus(row.id).then(res=>{
          if (res.code===200){
            this.getTableData();
          }
        })
      })
    },
    handleDelete(index, row){
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        doDeleteUser(row.id).then(res=>{
          if (res.code===200){
            Message.success("操作成功")
            this.getTableData();
          }
        })
      })
    },
    handleAdd(){
      this.nowUser={userType:1};
      this.addDialog=false;
      this.updateDialog=false;
      this.addDialog=true;
    }
  },
  mounted() {
    this.getTableData();
  }

}
</script>

<style lang="less"  scoped>

</style>